import React from 'react'
import { useTranslation } from "react-i18next";
import img1 from "../../assets/images/community/img1.png";
import icon1 from "../../assets/images/community/icon1.svg";
import icon2 from "../../assets/images/community/icon2.svg";
import icon3 from "../../assets/images/community/icon3.svg";
import icon4 from "../../assets/images/community/icon4.svg";
import cornerIcon from "../../assets/images/community/corner.svg";
import cornerHoverIcon from "../../assets/images/community/corner_hover.svg";

export default function Community() {
  const { t, i18n } = useTranslation();

    return (
        <div className="app-container community-page">
            <div className='top-row'>
                <div className='left'>

                    <div className='title'>{t("community.title")}</div>
                    <div className='desc'>{t("community.desc1")}</div>
                    <div className='desc'>{t("community.desc2")}</div>
                </div>
                <div className='right'>

                    <img className='right-img' src={img1}></img>
                </div>
            </div>
            <div className='middle-box'>
            <div className='middle-row'>
                <div className='title'>{t("community.middleTitle")}</div>
                <div className='desc'>{t("community.middleDesc")}</div>
            </div>
            </div>
 
            <div className='bottom-box'>
                <div className='bottom-row'>
                    <div className='bottom-item'>
                        <div className="title-row">
                            <div className='left'>
                                <img className='icon-box icon-one' src={icon1}></img>
                                <div className='item-name'>{t("community.item1Title")}</div>
                            </div>
                            <div className='corner-box'>
                                <img className='corner-icon' src={cornerIcon}></img>
                                <img className='corner-icon-hover' src={cornerHoverIcon}></img>
                            </div>
                           

                        </div>
                        <div className='desc'>{t("community.item1Desc")}</div>
                    </div>

                    <div className='bottom-item'>
                        <div className="title-row">
                            <div className='left'>
                                <img className='icon-box icon-two' src={icon2}></img>
                                <div className='item-name'>{t("community.item2Title")}</div>
                            </div>
                            <div className='corner-box'>
                                <img className='corner-icon' src={cornerIcon}></img>
                                <img className='corner-icon-hover' src={cornerHoverIcon}></img>
                            </div>
                        </div>
                        <div className='desc'>{t("community.item2Desc")}</div>
                    </div>
                </div>
                <div className='bottom-row'>
                    <div className='bottom-item'>
                        <div className="title-row">
                            <div className='left'>
                                <img className='icon-box' src={icon3}></img>
                                <div className='item-name'>{t("community.item1Title")}</div>
                            </div>
                            <div className='corner-box'>
                                <img className='corner-icon' src={cornerIcon}></img>
                                <img className='corner-icon-hover' src={cornerHoverIcon}></img>
                            </div>
                        </div>
                        <div className='desc'>{t("community.item1Desc")}</div>
                    </div>

                    <div className='bottom-item'>
                        <div className="title-row">
                            <div className='left'>
                                <img className='icon-box' src={icon4}></img>
                                <div className='item-name'>{t("community.item2Title")}</div>
                            </div>
                            <div className='corner-box'>
                                <img className='corner-icon' src={cornerIcon}></img>
                                <img className='corner-icon-hover' src={cornerHoverIcon}></img>
                            </div>
                        </div>
                        <div className='desc'>{t("community.item2Desc")}</div>
                    </div>
                </div>

            </div>
        </div>
    )
}